const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');
const webpack = require('webpack')
const readEnv = require('./readEnv')
const env = readEnv('./.env.development')
//路径的配置
const PATH = {
  app: path.join(__dirname, "./src/main"),
  build: path.join(__dirname, "./myMuscH5")
}
function resolve(dir) {
  return path.join(__dirname, dir);
}
//配置项webpack
module.exports = {
  mode: "development",//定义开发环境还是生产环境
  entry: {
    app: PATH.app
  },
  output: {
    filename: "[name].js",//在配置了多个entry时，通过名称模板为不同的entry生成不同的文件名称
    path: PATH.build
  },
  watch: true,
  module: {
    rules: [
      //vue
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
          }
          // other vue-loader options go here
        }
      },
      //css
      {
        //用正则表达式去匹配要用该Loader转换的css文件
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      //sass
      {
        test: /\.sass$/,
        use: ['style-loader', 'css-loader?minimize', 'sass-loader'],
      },
      //less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader?minimize', 'less-loader'],
      },
      //scss
      {
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader" // 将 JS 字符串生成为 style 节点
          },
          {
            loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
          },
          {
            loader: "sass-loader" // 将 Sass 编译成 CSS
          }
        ]
      },
      //js
      {
        test: /\.js$/,
        loader: "babel-loader",
        include: [
          resolve('src'),
          resolve('node_modules/framework7'),
          resolve('node_modules/framework7-vue'),
          resolve('node_modules/template7'),
          resolve('node_modules/dom7'),
          resolve('node_modules/ssr-window'),
        ],
      },
      //tsx
      {
        test: /\.tsx?$/,
        loader: "awesome-typescript-loader",
        include: [
          // resolve('src'),
          resolve('node_modules/framework7'),
          resolve('node_modules/framework7-vue'),
        ],
        //         options: {
        //           configFile: path.resolve(__dirname, '../tsconfig.json')
        // 　　　　　}
      },
      //svg
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/assets/icons/svg')],
        options: {
          symbolId: 'icon-[name]'
        }
      },

      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/assets/icons/svg')],
        options: {
          limit: 10000,
          esModule: false
        }
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        loader: 'file-loader',
        options: {
          esModule: false
        }
      }
    ]

  },
  devServer: {
    // port: 8000,
    // host: '0.0.0.0',
    hot: true, //热更新，修改代码后，不刷新整个页面
    historyApiFallback: true, //使用historyApi
    open: true,//自动打开浏览器
    // contentBase: '/myMuscH5/',
    // watchOptions: {
    //   poll: true
    // },
    proxy: {
      //代理到后端服务接口
      '/dev-api': { // 这个是你要替换的位置
        // target: 'http://127.0.0.1:9000/music',//这个是被替换的目标地址
        target: 'http://47.98.233.31:9000/music',
        changeOrigin: true,
        pathRewrite: { "^/dev-api": "" }
      }
    },
  },
  devtool: 'source-map',
  resolve: {
    extensions: ['.js', '.ts', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      "@": resolve("src")
    }
  },
  plugins: [
    new VueLoaderPlugin(),
    new HotModuleReplacementPlugin(),

    new webpack.DefinePlugin({ // 定义环境和变量
      'process.env': {
        // NODE_ENV: "'development'",
        ...env
      }
    })


  ]

}
